<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
    <meta name="author" content="GeeksLabs">
    <meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
    <link rel="shortcut icon" href="img/favicon.png">
</head>
<body>
<form id="inputForm">
    <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h4 class="modal-title">标签</h4>
    </div>
    <div class="modal-body">
        <section class="content" id="tagList">
            #for(tag : tags)
            <span class="labelS">#(tag.name)</span>
            #end
        </section>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn " data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" id="chooseBtn">确定</button>
    </div>
</form>
</body>
</html>
<script type="text/javascript">
    $().ready(function() {

        $("#tagList span").on("click",function () {
            if($(this).hasClass("labelCheck")){
                $(this).removeClass("labelCheck");
            }else{
                $(this).addClass("labelCheck");
            }
        });

        $("#chooseBtn").on("click",function () {
            var checkTags = $("#tagList").find(".labelCheck");
            if(checkTags.length<1){
                alert("请选择标签");
                return false;
            }
            $.each(checkTags,function (index,item) {
                var text = $(item).text();
                if($("#tagBody span[val='"+text+"']").length<1){
                    $("#tagBody").append('<span class="labelS" val="'+text+'">'+text+'<input type="hidden" name="tagNames" value="'+text+'"/><a href="javascript:void(0);">×</a></span>');
                }
            });
            $(".close").trigger("click");
        });
    });
</script>